<template>
	<view class="content">
		<!-- 搜索条 -->
		<view class="searchTopBox">
			<view class="searchBoxRadius">
				<view class="grace-search-icon searchBoxIcon" style="height: 100%;width: 5%;margin-top: 1.5%;">
						<uni-icons type="search" size="24" color="#6BA8FD" @click="search"></uni-icons>
				</view>
				<view>
					<input class="searchBoxIpt" v-model="searchVal" type="search"  @confirm="searchNow($event)" placeholder="关键字" style="width: 65%;"></input>
				</view>
					<button class="primary" style="height: 100%;font-size: 88%;" @click="search">搜索</button>
			</view>
		</view>
	<!-- 展示更多的通告消息 -->
	
		<!-- 分割线 -->
		<view class="list">
			<view class="flex_col" v-for="(item,index) in notices" :key="index">
				<image src="../../static/ggl.png" mode="aspectFill"></image>
				<view class="flex_grow">
					<view class="flex_col" @click="noticesDetail(item.id)">
						<view class="flex_grow">{{item.msg | strFormat}}</view>
						<view class="time">{{item.createDate | dateFormat("YYYY-MM-DD")}}						</view>
					</view>
					<!-- <view class="info" v-html="formatTime(item.detail)"></view> -->
				</view>
				<view style="margin-left: 10px;">
					<view style="color: #2DB7F5;" v-if="item.read">已读</view>
					<view style="color: #F56C6C;" v-else="item.read">未读</view>
				</view>
			</view>
		</view>	
		<!-- 上拉加载更多 -->
		<view>
			<uni-load-more :status="status" :content-text="contentText" color="#C0C4CC"/>
		</view>
			
		<view class="icon" >
			<uni-icons @click="toTop" type="arrowthinup" size="30"></uni-icons>
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	// import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import search from "@/components/jm-search/jm-search.vue"
	import loginjs from '../../login.js'
	import {mapState} from 'vuex'
	export default {
		components:{
			search,
			uniIcons,
			uniLoadMore
		},
		
		computed: mapState(['baseUrl']),
		
		data() {
			return {
				status: '',
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '加载中'
				}, {
					value: 'noMore',
					text: '没有数据啦'
				}],
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '———————— 我是有底线的 ————————'
				},//end
				notices:[],//用来渲染页面的数组
				datalist:[],//用来存储全部数据的数组
				value:'',
				moretext:"没有数据啦",
				dataLength:0,//查询出数据的中条数
				searchVal:'',
				currentpage:1,//默认当前页
				pagestart:1,//默认开始页
				endIndex:1,//获取数据的最后一条下标
				pageCount:0,//总页数
				pagesize:8   //默认每页的数量
			}
		},
		/* 下拉刷新方法 */
		onPullDownRefresh() {
			this.pagestart=0
			this.searchVal=''
				if(this.currentpage==this.pageCount){
					//如果当前页已经是最后一页，修改当前页为默认第一页
					this.currentpage=1
				}
				//如果当前页是最后一页
				this.datalist=[]
				this.notices=[]
				this.getNoticeList(this.pagestart)
		        setTimeout(function () {
					//关闭刷新的方法
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		
		onShow() {
			uni.startPullDownRefresh();
			//检测用户是否登录
			var uNameAndAuth= loginjs.checkLogin()
			if(uNameAndAuth==null){
				return
			}
		},
		
		onLoad(){
			//检测用户是否登录
			var uNameAndAuth= loginjs.checkLogin()
			if(uNameAndAuth==null){
				return
			}
			//用户名和认证信息的组合
			 uNameAndAuth= uNameAndAuth.split("/")
			this.user=uNameAndAuth[0]
			this.Authorization=uNameAndAuth[1]
			this.datalist=[]
			this.notices=[]
			this.getNoticeList(0)
		},
		// 上拉加载
		onReachBottom() {
			if(this.moretext=="没有数据啦"){
				//点击加载更多失效
				uni.showToast({
					title:"没有数据啦",
					icon:"none",
					duration:2000
				})
				this.status= 'noMore';
				return
			}
			//10条数据每页2条 5页
			//当前页+1
			this.currentpage=this.currentpage+1
			this.pagestart=this.endIndex+1
			/* 如果当前页为最后一页，则修改数据获取的最大下标 */
				if(this.currentpage==this.pageCount){
					// console.log("当前最后一页")
					this.endIndex=this.dataLength-1
				}else{
					this.endIndex=this.currentpage*this.pagesize-1
				}
			var i=this.pagestart
			for(var i;i<=this.endIndex;i++){
				this.notices.push(this.datalist[i])
			}
			if(this.notices.length==this.datalist.length){
				this.moretext="没有数据啦"
			}
			this.status = 'loading'
			this.status = 'more'
		},
		//过滤器
		filters:{
			strFormat(str){
				if(str.length>10){
					return str.substr(0,10)+"..."
				}else{
					return str
				}
			}
		},
		methods: {
			toTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
			getNoticeList(val) {
				this.moretext="加载更多"
				var _this=this
				var Authorization = loginjs.getAuthorization()
				 uni.showLoading({
					title: '加载中..'
				}); 
				uni.request({
					url: this.baseUrl + 'api/notice/page?appName=' + "通知公告",
					header: {
						"Authorization": Authorization,
					},
					success(res) {
							 uni.hideLoading(); 
						if (res.data.code == 200) {
							 uni.hideLoading(); 
							if (res.data.data.length>0) {
							  _this.dataLength=res.data.data.length
							  if(_this.dataLength==1){
								  _this.notices=res.data.data
								  _this.moretext="没有数据啦"
								  return
							  }
							  if(val!=0){
								 _this.pagesize=val+7
							  }
							 var v =_this.dataLength%_this.pagesize
							 _this.pageCount= v==0 ? _this.dataLength/_this.pagesize : Math.ceil( _this.dataLength/_this.pagesize)
							if(_this.pageCount==1){
								_this.moretext="没有数据啦"
								_this.notices=res.data.data
								return
							}
							  _this.datalist=res.data.data
								 _this.endIndex=val==0?_this.currentpage*_this.pagesize-1:val
								var i=_this.pagestart
								for(var i;i<=_this.endIndex;i++){
									_this.notices.push( _this.datalist[i])
								}
								if(val!=0){
									_this.pagesize=_this.endIndex+1
									var mo=_this.dataLength%_this.pagesize
									_this.pageCount= (mo==0) ? _this.dataLength/_this.pagesize :Math.ceil( _this.dataLength/_this.pagesize)
									_this.currentpage=1
								}
							} else {
								uni.showToast({
									title: "当前没有公告",
									icon: "none",
									duration: 2000
								})
								return
							}
						}else if(res.data.code==401){
							//登录认证信息失效
							uni.showToast({
								title:"登录信息失效,正在前往登录",
								icon:"none",
								duration:3000
							})
							
							uni.navigateTo({
								url:"../login/login"
							})
							return
						}
					},
					fail() {
						 uni.hideLoading(); 
						 this.moretext="没有数据啦"
						uni.showToast({
							title: "获取数据失败",
							icon: "none",
							duration: 2000
						})
						return
					}
				})
			},
			/* 点击查询方法 */
			search(){
				if(this.msg==''){
					uni.showToast({
						title:"请输入查询内容",
						duration:2000,
						icon:"none"
					})
					return
				}
				uni.request({
					url: this.baseUrl + 'api/notice/page?appName=' + "通知公告",
					data: {
					        msg: this.searchVal
					    },
					header: {
					"Authorization": this.Authorization,
					},
					method:"GET",
					success:(res) => {
						console.log(res.data)
						var data = res.data
						if(data.code==200){
							console.log(data.data.length)
							if(data.data.length>0){
								this.notices = []
								// datalist:[]//用来存储全部数据的数组
								// currentpage:1//默认当前页
								// pagestart:0//默认开始页
								this.currentpage = this.pagestart = 0
								data.data.forEach(e => {
									// console.log(e.id)
									// console.log(e.msg)
									// console.log(e.createDate)
									// console.log(e.detail)
									// var i=_this.pagestart
									
									this.notices.push({
										id:e.id,
										msg:e.msg,
										createDate:e.createDate,
										detail:e.detail,
										read:e.read
									})
								})
							}else{
								uni.showToast({
									title:"查询无数据",
									icon:"none",
									duration:2000
								})
								return
							}
							
						}else{
							//获取数据异常
							uni.showToast({
								title:"获取数据异常A",
								icon:"none",
								duration:2000
							})
						}
					},
					fail() {
						uni.showToast({
							title:"获取数据异常B",
							icon:"none",
							duration:2000
						})
					}
				})
			},
			/* 查看详情方法 */ 
			noticesDetail(val){
				uni.navigateTo({
					url:"noticeDetails?noticeId="+val
				})
			},
			
		},
		
	}
</script>
<style scoped lang="scss">

	.mycontent {
		background-color: #efeff4;
	}

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 列表 */
	.list {
		// background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				// background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform:scaleY(0.5);	/* 1px像素 */
			}
		}
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					// background-color: #f3f3f3;
				}
			}
		}
	}
</style>
<style>
	
	
	.content {
			background: #FFFFFF;
		}
	
		.ov {
			overflow: hidden;
		}
	
		.fl {
			float: left;
		}
	
		.fr {
			float: right;
		}
	
		.searchTopBox {
			width: 100%;
			margin-top: 15px;
			height: 100upx;
			box-sizing: border-box;
			
		}
		.searchBoxRadius {
			width: 90%;
			height: 60upx;
			 background-color:#f8f8f9;
			margin-left: 5%;
			overflow: hidden;
			border-radius: 35upx;
		}
	
		.searchBoxIcon {
		
			margin-top: 20upx;
			margin-left: 20upx;
			float: left;
		}
	
		.searchBoxIpt {
			height: 70upx;
			line-height: 70upx;
			font-size: 16px;
			margin-left: 20upx;
			float: left;
		}
	
		.searchBotBox {
			width: 100%;
			margin-top: 30upx;
			padding: 15upx 3%;
			box-sizing: border-box;
		}
		/* image{
			display: block;
			width: 22px;
			height: 22px;
			
		} */
	
	
	.title{
		font-weight: 900;
	}
	.list_item{
		width: 100%;
		margin-bottom: 10px;
		border-bottom: 1px solid  #808080;
		/* box-shadow: 0px 1px 1px #808080; */
		
	}
	.allitem{
		width:100%;
	}
	.context{
		width: 300px;
		font-size: 14px;
		height:20px;
		text-overflow: ellipsis;
		overflow: hidden;
		
		white-space: nowrap;
	}
	.time{
		font-size: 14px;
	}
	.icon{
		background-color: #007AFF;
		text-align: center;
		border-radius: 50%;
		width:40px;
		line-height: 40px;
		position: fixed;
		top:90%;
		left: 85%;
		height:40px;
	}
	
</style>
